<template>
  <div class="pack-input" :style="cssStyle">
    <ares-input
      v-model="currentValue"
      :class="['pack-input_inner', prefixIcon ? 'prefix_inner' : '', suffixIcon ? 'suffix_inner' : '']"
      :placeholder="placeholder"
      :type="type"
      :maxlength="maxlength"
      :readonly="readonly"
      :disabled="disabled"
      :autofocus="autofocus"
      :autocomplete="autocomplete"
      :eye="eye"
      @blur="handleBlur"
      @focus="handleFocus"
      @input="setCurrentValue">
    </ares-input>
    <!-- 前置内容 -->
    <span class="pack-input_prefix" v-if="prefixIcon">
      <i :class="[prefixIcon, 'prefix_icon']"></i>
    </span>
    <span class="pack-input_suffix" v-if="suffixIcon">
      <i :class="[suffixIcon, 'suffix_icon']"></i>
    </span>
  </div>
</template>

<script>
export default {
  name: 'PackInput',

  props: {
    value: '',
    type: {
      default: 'text',
      type: String,
    },
    disabled: {
      default: false,
      type: Boolean,
    },
    readonly: {
      default: false,
      type: Boolean,
    },
    maxlength: {
      default: 60,
      type: Number,
    },
    placeholder: String,
    autofocus: {
      default: false,
      type: Boolean,
    },
    autocomplete: {
      default: false,
      type: Boolean,
    },
    clearable: {
      default: false,
      type: [Boolean, Object],
    },
    eye: {
      default: false,
      type: [Boolean, Object],
    },
    cssStyle: String,
    prefixIcon: String,
    suffixIcon: String,
  },
  data() {
    return {
      currentValue: this.value,
    };
  },
  watch: {
    value(val) {
      this.currentValue = val;
    },
  },
  methods: {
    // 这里的input事件实际上就是change事件
    setCurrentValue() {
      this.$emit('input', this.currentValue);
      this.$emit('change', this.currentValue);
    },
    handleFocus(e) {
      this.$emit('focus', e);
    },
    handleBlur(e) {
      this.$emit('blur', e);
    },
  },
};
</script>

<style lang="less">
.pack-input {
  position: relative;
  &_inner {
    padding: 0 15px;
  }
  .prefix_inner {
    padding-left: 35px;
  }
  &_prefix {
    position: absolute;
    height: 100%;
    left: 5px;
    top: 0;
    text-align: center;
    transition: all .3s;
    .prefix_icon {
      height: 100%;
      width: 25px;
      text-align: center;
      transition: all .3s;
      line-height: 40px;
      font-size: 20px;
    }
  }
  &_suffix {
    position: absolute;
    height: 100%;
    right: 5px;
    top: 0;
    text-align: center;
    transition: all .3s;
    .suffix_icon {
      height: 100%;
      width: 25px;
      text-align: center;
      transition: all .3s;
      line-height: 40px;
      font-size: 20px;
    }
  }
  .suffix_inner {
    padding-right: 35px;
  }
}
</style>

<style>
.pack-input .ares-input-field{
  padding: 10px 0px;
}
.pack-input .ares-input_active::after {
  border: none;
}
.pack-input .ares-input::after {
  border: none!important;
}
</style>
